import React, { useEffect, useState } from "react";
import {
  Swiper,
  Image,
  Toast,
  Cell,
  Dialog,
  Calendar,
  Input,
  hooks,
} from "react-vant";
import { Arrow, Exchange } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
import axios from "../../axios/index";
type Props = {};
const Index = (props: Props) => {
  const [list, setList] = useState([]);
  useEffect(() => {
    (async () => {
      let res = await axios.get("http://localhost:8080/getindexlist");
      setList(res.data.data);
    })();
  }, []);
  console.log(list);
  const navigate = useNavigate();
  const [imgUrl, setImgUrl] = useState([
    { img: require("../../img/lbt.png") },
    { img: require("../../img/lbt.png") },
    { img: require("../../img/lbt.png") },
  ]);
  //切换
  //登录
  const [sj, setSj]: any = useState(
    JSON.parse(localStorage.getItem("sj") as any) || []
  );
  const onlogin = () => {
    let token = localStorage.getItem("token");
    if (!token) {
      Dialog.confirm({
        message: "未登录,请先去进行登录",
      })
        .then(() => {
          navigate("/login");
        })
        .catch(() => {
          console.log("catch");
        });
    } else {
      navigate("/querydata");
    }
  };
  localStorage.setItem("sj", JSON.stringify(sj));
  console.log(sj, "+++++++++");

  const rems = () => {
    setSj([]);
    localStorage.removeItem("sj");
  };
  const [state, updateState]: any = hooks.useSetState({ text: "北京" });
  const [state1, updateState1]: any = hooks.useSetState({ text: "上海" });
  const huan = () => {
    updateState(state1);
    updateState1(state);
    let obj = {
      state: state.text,
      state1: state1.text,
    };
    setSj([...sj, obj]);
    // setSj(obj)
  };
  const zhandian = () => {
    navigate("/site");
  };
  let dz = localStorage.getItem("dz");
  let dz2 = localStorage.getItem("dz2");
  let cs = localStorage.getItem("cs");
  let cs2 = localStorage.getItem("cs2");

  console.log(dz, dz2);
  useEffect(() => {
    updateState({ text: dz });
    updateState1({ text: dz2 });

    console.log(state, state1);
    if (state.text === state1.text) {
      updateState1({ text: "请选择" });
    }
  }, [dz, dz2]);
  const zhandian2 = () => {
    navigate("/site2");
  };

  return (
    <div className="Indexs">
      <div className="Indexs_bag">
        <dl>
          <dt>火车票预定</dt>
          <dd>便捷购票,服务您的每一次出行</dd>
        </dl>
        <div className="Indexs_tie">
          <div className="Index_tie_box">
            <div className="Indexs_tie_title">
              <div>
                <Input
                  value={state.text}
                  onChange={(text) => updateState({ text })}
                  placeholder="请输入文本"
                  onClick={zhandian}
                />
              </div>
              <div onClick={huan}>
                <Exchange />
              </div>
              <div>
                <Input
                  value={state1.text}
                  onChange={(text) => updateState1({ text })}
                  placeholder="请输入文本"
                  onClick={zhandian2}
                />
              </div>
            </div>
            <div className="Indexs_tie_title2">
              <>
                <Calendar>
                  {(val: any, actions) => (
                    <Cell
                      title="2023/4/20"
                      value={val ? val.toLocaleDateString() : ""}
                      onClick={() => actions.open()}
                    />
                  )}
                </Calendar>
              </>
            </div>
            <div className="Indexs_tie_chaxun">
              <button onClick={onlogin}>查询</button>
            </div>
            <div className="Indexs_tie_botton">
              {/* <p>北京-上海</p> */}
              <p>
                {sj.length > 0
                  ? sj &&
                    sj.map((item: any, index: any) => {
                      return (
                        <span key={index}>
                          {item.state}-{item.state1}
                        </span>
                      );
                    })
                  : "暂无数据"}
              </p>
              <p onClick={rems}>清楚历史</p>
            </div>
          </div>
        </div>
      </div>
      <div className="box">
        <div className="box_lbt">
          <div className="demo-swiper">
            <Swiper autoplay>
              {imgUrl.map((item, index) => (
                <Swiper.Item key={index}>
                  <Image lazyload src={item.img} />
                </Swiper.Item>
              ))}
            </Swiper>
          </div>
        </div>
        <div className="box_lb">
          <div className="box_lb_title">
            <h3>出行快讯</h3>
            <span>更多</span>
          </div>
          <div className="box_lb_nr">
            {list &&
              list.map((item: any, index: any) => {
                return (
                  <div key={index} className="box_lb_nr_nr">
                    <div className="box_left">{item.id}</div>
                    <div className="box_centent">
                      <p style={{ fontSize: "14px" }}>{item.title}</p>
                      <p>{item.name}</p>
                      <p style={{color:"#ccc"}}>{item.data}</p>
                    </div>
                    <div className="box_right">
                      <img src={item.img} alt="" />
                    </div>
                  </div>
                );
              })}
            {/* {list &&
              list.map((item: any, index) => {
                return (
                  <div className="box_lb_nr_div" key={index}>
                    <div className="box_lb_nr_div_left" style={{width:'500px'}}>{item.id}</div>
                    <div>
                      <p>{item.title}</p>
                      <p>
                        <span>{item.name}</span>
                        <span>{item.data}</span>
                      </p>
                    </div>
                    <div>
                      <img src={item.img} alt="" />
                    </div>
                  </div>
                );
              })} */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
